import React, { Component } from 'react';
import { NavigationEvents } from 'react-navigation';
import { StyleSheet, DeviceEventEmitter, Text, View, Image, PixelRatio, Dimensions, TouchableOpacity, FlatList } from "react-native";
import { style } from '../../theme/style';

import { STORAGE_CONSTANT } from '../../config/storage';
import { GLOBAL } from '../../config/global';
import { API, API_GENERATE } from '../../config/api';
import StorageHelper from '../../utils/storageHelper';
import HTTP from '../../utils/http'
import JsonUtils from '../../utils/JsonUtils';
import { Item } from 'native-base';
const ScreenWidth = Dimensions.get('window').width;
const scale = ScreenWidth / 375;

class ImgLocal extends Component {
	constructor(props) {
		super(props);
	}
	render () {
		return (
			<Image style={styles.userImg} source={require('../../imgs/user-head.png')} />
		)
	}
}

export class UserPage extends Component {
	static navigationOptions = {
		header: null
	}
	constructor(props) {
		super(props);
		this.state = {
			userName: 'admin',
			imgDefault: false,
			imgServer: '',
			saveInfo: {},
			purchasing: 0,  //采购
			sale: 0,  //销售
			totalPurchases: 0,  //采购总量
			totalSales: 0,// 销售总量
			perSale: 0,
			perPurchas: 0,
			loadIcon: false,
		}
	}
	componentDidMount () {
		DeviceEventEmitter.addListener('getImgUrl', (res) => {
			if (!res.fileId) return;
			HTTP.GET(API_GENERATE(API.GET_IMG_VIEW), { fileId: res.fileId }, null, 30000).then((resObj) => {
				this.setState({
					imgServer: resObj.image,
				})
			})
		});
	}

	async	_getData (isUpdate) {
		console.log('2112', 1221221221)
		let account = await StorageHelper.get(STORAGE_CONSTANT.USER_INFO_KEY);
		this.setState({
			saveInfo: JSON.parse(account)
		})
		//下拉刷新重新加载账号信息
		if (isUpdate && 1 === isUpdate) {
			let userInfo = await HTTP.POST(API_GENERATE(API.GET_USER_INFO), { loginName: this.state.saveInfo.loginName });
			if (userInfo) {
				//账号信息存储
				StorageHelper.set(STORAGE_CONSTANT.USER_INFO_KEY, JsonUtils.jsonToString(userInfo));
				//本页账号信息更新
				this.setState({
					saveInfo: userInfo
				})
			}
		}

		if (this.state.saveInfo.userRoles && this.state.saveInfo.userRoles.length) {
			const roles = [];
			for (var i = 0; i < this.state.saveInfo.userRoles.length; i++) {
				roles[i] = this.state.saveInfo.userRoles[i].roleName;
			}
			userRolesArr = roles;
		}
		this.setState({
			userName: this.state.saveInfo.userName,
			mobileNo: this.state.saveInfo.mobileNo,
			email: this.state.saveInfo.email,
			organName: this.state.saveInfo.organName
		});

		// 获取头像接口
		if (this.state.saveInfo && this.state.saveInfo.avatarUrl) {
			this.setState({
				imgServer: this.state.saveInfo.avatarUrl,
			})
		} else if (this.state.saveInfo.avatar) {
			let headObj = await HTTP.GET(API_GENERATE(API.GET_IMG_VIEW), { fileId: this.state.saveInfo.avatar }, null, 30000)
			if (headObj) {
				this.setState({
					imgServer: headObj.image,
				})
			}
		}

		/*  */
		let resData = await HTTP.GET(API_GENERATE(API.INFO_GATHER));
		let { purchasing, sale, totalPurchases, totalSales } = resData;
		this.setState({
			purchasing,
			sale,
			totalPurchases,
			totalSales,
		}, function () {
			this.setState({
				perSale: parseInt((this.state.sale / this.state.totalSales) * 100) + '%',
				perPurchas: parseInt((this.state.purchasing / this.state.totalPurchases) * 100) + '%'
			})
		});
	}

	componentWillMount () {
		this._getData();
	}


	_createEmptyView = () => {
		let defaultImg = require('../../imgs/user-head.png');
		let uriImg = { uri: this.state.imgServer }
		return (
			<View style={styles.container}>
				<NavigationEvents onWillFocus={({ action }) => {
					this._getData();
				}} />
				<View style={styles.bgColor}>
					<View style={styles.warpBoxHead}>
						<View style={styles.userHead}>
							<View>
								<TouchableOpacity activeOpacity={1} onPress={() => this.props.navigation.navigate('UserInfo', this.state.saveInfo)} >
									<Image style={styles.userImg} source={this.state.imgServer ? (this.state.imgDefault ? defaultImg : uriImg) : defaultImg}
										onError={(e) => {
											this.setState({ imgDefault: true })
										}} />
								</TouchableOpacity>
								<Text style={styles.infoText}>{this.state.organName}</Text>
							</View>
							<View style={styles.userInfo}>
								<View style={styles.userTitleBox}>
									<Text style={styles.userName}>{this.state.userName}</Text>
								</View>
								{/* <View style={styles.userTitleBox}>
									{
										userRolesArr.map((item, index) => {
											return (
												<TouchableOpacity key={index} activeOpacity={1} style={index % 2 ? styles.buyBtnBox : styles.sellBtnBox}>
													<Text style={styles.sellBtn}>{item}</Text>
												</TouchableOpacity>
											)
										})
									}
								</View> */}
								<View style={styles.infoXxBox}>
									<Image style={{ width: 12 * scale, height: 12 * scale }} source={require('../../imgs/Group10.png')} />
									<Text style={styles.infoXx}>{this.state.mobileNo}</Text>
								</View>
								<View style={styles.infoXxBox} >
									<Image style={{ width: 12 * scale, height: 12 * scale }} source={require('../../imgs/Group8.png')} />
									<Text style={styles.infoXx}>{this.state.email}</Text>
								</View>
							</View>
						</View>
					</View>
					{/* <View style={styles.showBoxWarp}>
						<View style={styles.showBox}>
							<View style={styles.showItem}>
								<Text style={styles.number}>{this.state.totalSales}</Text>
								<Text style={styles.numberText}>销量总量</Text>
							</View>
							<View style={styles.showItem}>
								<Text style={styles.number}>{this.state.totalPurchases}</Text>
								<Text style={styles.numberText}>采购总量</Text>
							</View>
							<View style={styles.showItem}>
								<Text style={styles.number}>{this.state.sale}</Text>
								<Text style={styles.numberText}>销售进行</Text>
							</View>
							<View style={styles.showItem}>
								<Text style={styles.number}>{this.state.purchasing}</Text>
								<Text style={styles.numberText}>采购进行</Text>
							</View>
						</View>
						<View style={styles.progressBox}>
							<Text style={styles.progressText}>销售单</Text>
							<View style={styles.progressWarp}>
								<View style={[styles.progressInner, { width: this.state.perSale }]}></View>
							</View>
						</View>
						<View style={styles.progressBox}>
							<Text style={styles.progressText}>采购单</Text>
							<View style={styles.progressWarp}>
								<View style={[styles.progressInner, { width: this.state.perPurchas }]}></View>
							</View>
						</View>
						<View style={styles.radioBox}>
							<TouchableOpacity activeOpacity={1} style={styles.radioItem}>
								<View style={[styles.radio, styles.radioActive]}></View>
								<Text>进行中</Text>
							</TouchableOpacity>
							<TouchableOpacity activeOpacity={1} style={styles.radioItem}>
								<View style={styles.radio}></View>
								<Text>总量</Text>
							</TouchableOpacity>
						</View>
					</View> */}
				</View>
				<View style={[styles.bgColor, styles.marginTop]}>
					<View style={styles.listBox}>
						<View style={styles.list}>
							<TouchableOpacity onPress={() => {
								this.props.navigation.navigate('UserSetPage', GLOBAL.APP_HAS_UPDATE)
							}} activeOpacity={1} style={[styles.listItem, styles.noBorder]}>
								<Text style={styles.listTitle}>设置</Text>
								<Image style={styles.listImg} source={require('../../imgs/arrowBlue.png')} />
							</TouchableOpacity>
						</View>
					</View>
				</View>


			</View>
		);
	}


	render () {
		return (
			<FlatList
				style={styles.container}
				// 空布局
				ListEmptyComponent={this._createEmptyView}
				//下拉刷新相关
				onRefresh={() => this._getData(1)}
				refreshing={this.state.loadIcon}
			/>
		);
	}
}

const styles = StyleSheet.create({
	container: {
		flex: 1,
		backgroundColor: style.color.light,
	},
	bgColor: {
		backgroundColor: style.color.white
	},
	warpBoxHead: {
		height: 130 * scale,
		marginTop: 49 * scale,
		marginLeft: 24 * scale,
		marginRight: 24 * scale,
	},
	userHead: {
		flexDirection: 'row',
	},
	userImg: {
		width: 74 * scale,
		height: 74 * scale,
		marginRight: 26 * scale,
		borderRadius: 37 * scale,
	},
	userInfo: {
		flex: 1
	},
	infoText: {
		width: 74 * scale,
		marginTop: 18 * scale,
		fontSize: 14 * scale,
		color: style.color.dark
	},
	userTitleBox: {
		flexDirection: 'row',
		alignItems: 'center',
		flexWrap: 'wrap',
	},
	userName: {
		fontSize: 18 * scale,
		color: style.color.dark
	},
	sellBtnBox: {
		backgroundColor: style.color.taps,
		paddingLeft: 2 * scale,
		paddingRight: 2 * scale,
		height: 18 * scale,
		borderRadius: 2 * scale,
		flexDirection: 'row',
		justifyContent: 'center',
		alignItems: 'center',
		marginRight: 7 * scale,
		marginTop: 5 * scale
	},
	sellBtn: {
		fontSize: 11 * scale,
		color: style.color.white,
	},
	buyBtnBox: {
		backgroundColor: style.color.themeColor,
		paddingLeft: 2 * scale,
		paddingRight: 2 * scale,
		height: 18 * scale,
		borderRadius: 2 * scale,
		flexDirection: 'row',
		justifyContent: 'center',
		alignItems: 'center',
		marginRight: 7 * scale,
		marginTop: 5 * scale
	},
	buyBtn: {
		fontSize: 11 * scale,
		color: style.color.white,
	},
	infoXxBox: {
		marginTop: 5 * scale,
		flexDirection: 'row',
		alignItems: 'center'
	},
	infoXx: {
		color: style.color.dark,
		fontSize: 12 * scale,
		marginLeft: 6 * scale
	},
	showBoxWarp: {
		paddingLeft: 24 * scale,
		paddingRight: 24 * scale
	},
	showBox: {
		flexDirection: 'row',
		justifyContent: 'space-between',
		marginTop: 20 * scale,
		marginBottom: 10 * scale
	},
	showItem: {
		width: 55 * scale,
		height: 60 * scale,
		flexDirection: 'column',
		justifyContent: 'space-around',
		alignItems: 'center'
	},
	number: {
		color: style.color.dark,
		fontSize: 20 * scale
	},
	numberText: {
		fontSize: 12 * scale,
		color: style.color.darkGray
	},
	progressBox: {
		flexDirection: 'row',
		alignItems: 'center',
		marginTop: 12 * scale
	},
	progressText: {
		fontSize: 12 * scale,
		color: style.color.dark
	},
	progressWarp: {
		width: 240 * scale,
		height: 6 * scale,
		borderRadius: 3 * scale,
		backgroundColor: '#E5E5E5',
		marginLeft: 8 * scale
	},
	progressInner: {
		height: 6 * scale,
		borderRadius: 3 * scale,
		backgroundColor: style.color.themeColor
	},
	radioBox: {
		flexDirection: 'row',
		marginTop: 20 * scale,
		paddingBottom: 20 * scale
	},
	radioItem: {
		flexDirection: 'row',
		alignItems: 'center',
		marginRight: 25 * scale
	},
	radio: {
		width: 8 * scale,
		height: 8 * scale,
		backgroundColor: '#e5e5e5',
		borderRadius: 4 * scale,
		marginRight: 7 * scale,
	},
	radioActive: {
		backgroundColor: style.color.themeColor
	},
	marginTop: {
		marginTop: 12 * scale
	},
	listBox: {
		paddingLeft: 24 * scale,
		paddingRight: 24 * scale,
	},
	listItem: {
		height: 52 * scale,
		width: '100%',
		borderBottomWidth: 1 / PixelRatio.get(),
		borderStyle: 'solid',
		borderBottomColor: style.color.border,
		flexDirection: 'row',
		justifyContent: 'space-between',
		alignItems: 'center'
	},
	listTitle: {
		color: style.color.dark,
		fontSize: 14 * scale
	},
	listImg: {
		width: 11 * scale,
		height: 11 * scale,
	},
	noBorder: {
		borderBottomWidth: 0
	},
	disNone: { height: 0, width: 0 },
})